function load() {
    init();
}
var data = [];

function init() {
    var num = 28;
    add(28);
    $("#loop").onclick = function () {
        var node = $("#tree");
        loop2(node);
    }
    $("#delete").onclick = function () {
        var nodeP = $("#tree");
        var isNode = false;
        del(nodeP, isNode);
    }

    $("#add").onclick = function () {
        var nodeP = $("#tree");
        addIn(nodeP);
    }
}

function add(num) {
    for (var i = 0; i < num - 1; i++) {
        var div = document.createElement("div");
        div.appendChild(document.createTextNode(i));
        div.onclick = function (event) {
            this.style.backgroundColor = "blue";
            event.stopPropagation();
        }
        data[i] = div;
    }
    for (var i = data.length - 1; i > 0; i--) {
        var tmp = Math.floor((i - 1) / 3);
        var child = data[tmp].children;

        if (child != null) {
            data[tmp].insertBefore(data[i], child[0]);
        } else {
            data[tmp].appendChild(data[i]);
        }
    }
    $("#tree").appendChild(data[0]);

}

function loop(node) {
    var child = node.children;
    var len = child.length;
    if (len === 0) { return; }
    for (var i = 0; i < len; i++) {
        if (child[i] != null) {
            loop(child[i]);
        }
    }
}

function loop2(node) {
    var child = node.children;
    var len = child.length;
    if (len === 0) { return; }
    var i = 0;
    function run() {
        if (i - 1 >= 0) {
            child[i - 1].style.backgroundColor = "white";
            if (i === len) {
                clearInterval(stop);
                return;
            }
        }
        if (child[i] != null) {
            console.log(child[i]);
            loop(child[i]);
            child[i].style.backgroundColor = "blue";
        }
        i++;
        var stop = setInterval(run, 1000);
    }

}

function addIn(node) {
    if (node != null) {
        var child = node.children;
        var len = child.length;
        if (len === 0) { return; }
        for (var i = 0; i < len; i++) {
            if (child[i] != null) {
                addIn(child[i]);
                if (child[i].style.backgroundColor === "blue") {
                    var input = document.createTextNode($("#text").value);
                    var div = document.createElement("div");
                    div.appendChild(input);
                    child[i].appendChild(div);
                }
            }
        }
    }
}
function del(nodeP, isNode) {
    if (nodeP != null) {
        var node = nodeP.children;
        var len = node.length;
        for (var i = 0; i < len; i++) {
            if (node[i] != null) {
                if (isNode || node[i].style.backgroundColor === "blue") {
                    del(node[i], true);
                    console.log(node[i]);
                    nodeP.removeChild(node[i]);
                    i--; len--;// how to delete xianglin node yao(shanchu yinci i len change)
                } else {
                    del(node[i], false);
                    console.log(node[i]);
                }
            }
        }
    }

}

function del2() {
    for (var i = 0; i < data.length; i++) {
        if (data[i] != null && data[i].style.backgroundColor === "blue") {
            var divP = data[i].parentNode;
            divP.removeChild(data[i]);
            data[i] = null;
            return;
        }
    }
}

function $(el) {
    return document.querySelector(el);
}

